<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <div class="topbar clearfix">
        <a id="apollo-menu-button" href="#">
            <span class="fa fa-bars"/>
        </a>

        <span class="topbar-title"><ui:insert name="topbar-title"/></span>

        <a id="options-menu-button" href="#">
            <span class="fa fa-ellipsis-h"/>
        </a>

        <div id="topbar-icons">
            <span class="topbar-search">
                <input type="text" placeholder="Search" />
                <span class="topbar-search-icon fa fa-search"/>
            </span>
            <a href="#"><span class="topbar-item-text">Messages</span><span class="topbar-icon fa fa-envelope-o"/></a>
            <a href="#"><span class="topbar-item-text">Settings</span><span class="topbar-icon fa fa-gear"/></a>
            <a href="#"><span class="topbar-item-text">User</span><span class="topbar-icon fa fa-user"/></a>
        </div>
    </div>
</ui:composition>
